<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>The HTML Presentation Framework</title>
        <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
        <meta name="author" content="Hakim El Hattab">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <style>
            html,body{
                width: 100%;
                height: 100%;
                background:#0A0F23;
            }
            *{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>

    <body>
    <div id="main" style="width: 100%;height:100%;"></div>
    <script src="../../components/echarts-4.0.4.min.js"></script>
        <script>
            var myChart = echarts.init(document.getElementById('main'));

            function getData(value) {
                return [{
                    value: value,
                    name: value,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#336c9c'
                            }, {
                                offset: 1,
                                color: '#62cff1'
                            }])
                        }
                    }
                }, {
                    // value: 11117 - value,
                    value: 2117 - value,
                    itemStyle: {
                        normal: {
                            color: 'transparent'
                        }
                    }
                }];
            }

            placeHolderStyle = {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    }
                }
            };
            option = {
                color: ['transparent', 'transparent', 'transparent', 'transparent', "transparent"],
                backgroundColor: '#0A0F23',
                title: {
                    text: '技术供给主体',
                    left: 'center',
                    top: '5%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 22
                    }
                },
                legend: {
                    top: "23%",
                    left: "40%",
                    align: "right",
                    itemHeight: 10,
                    data: ['高校', '个人', '企业'],
                    textStyle: {
                        color: '#fff',
                        fontSize: 18
                    },
                    selectedMode: true,
                    orient: "vertical"
                },
                grid: {
                    top: '10%',
                    left: '10%',
                    bottom: '5%',
                    right: '10%',
                    containLabel: true
                },
                series: [{
                    name: '高校',
                    type: 'pie',
                    clockWise: true, //顺时加载
                    hoverAnimation: false, //鼠标移入变大
                    radius: [90, 110],
                    borderWidth: 5,
                    center: ['50%', '55%'],
                    itemStyle: placeHolderStyle,
                    data: getData(1189)
                }, {
                    name: '企业',
                    type: 'pie',
                    clockWise: true, //顺时加载
                    //startAngle: 210,
                    hoverAnimation: false, //鼠标移入变大
                    radius: [30, 50],
                    borderWidth: 5,
                    center: ['50%', '55%'],
                    itemStyle: placeHolderStyle,
                    data: getData(592)
                }, {
                    name: '个人',
                    type: 'pie',
                    clockWise: true, //顺时加载
                    hoverAnimation: false, //鼠标移入变大
                    radius: [60, 80],
                    borderWidth: 5,
                    center: ['50%', '55%'],
                    itemStyle: placeHolderStyle,
                    data: getData(736)
                }]
            };

            myChart.setOption(option);
        </script>
    </body>
</html>
